<template>
  <view class="order-confirm-page">
    <view class="page-header">
      <text class="title">确认订单</text>
    </view>

    <!-- 收货地址 -->
    <view class="address-section">
      <view class="section-title">收货地址</view>
      <view class="address-card" @click="chooseAddress">
        <view class="address-info" v-if="address">
          <text class="consignee">{{ address.consignee }} {{ address.phone }}</text>
          <text class="address-detail">{{ address.province }} {{ address.city }} {{ address.district }} {{ address.detail }}</text>
        </view>
        <view class="address-empty" v-else>
          <text class="empty-text">点击选择收货地址</text>
          <uni-icons type="right" size="24" color="#999"></uni-icons>
        </view>
      </view>
    </view>

    <!-- 商品列表 -->
    <view class="goods-section">
      <view class="section-title">商品信息</view>
      <view class="goods-list">
        <view class="goods-item" v-for="(item, index) in orderGoods" :key="index">
          <image :src="item.image" class="goods-image"></image>
          <view class="goods-info">
            <text class="goods-title">{{ item.title }}</text>
            <text class="goods-spec">{{ item.spec }}</text>
            <view class="goods-price">¥{{ item.price.toFixed(2) }}</view>
          </view>
          <view class="goods-quantity">x{{ item.quantity }}</view>
        </view>
      </view>
    </view>

    <!-- 支付方式 -->
    <view class="payment-section">
      <view class="section-title">支付方式</view>
      <view class="payment-methods">
        <view class="payment-method" :class="{ selected: paymentMethod === 'wechat' }" @click="selectPayment('wechat')">
          <image src="/static/icons/wechat-pay.png" class="payment-icon"></image>
          <text class="payment-name">微信支付</text>
          <uni-icons type="checkmark-circle" size="28" color="#007AFF" v-if="paymentMethod === 'wechat'"></uni-icons>
        </view>
        <view class="payment-method" :class="{ selected: paymentMethod === 'alipay' }" @click="selectPayment('alipay')">
          <image src="/static/icons/alipay.png" class="payment-icon"></image>
          <text class="payment-name">支付宝</text>
          <uni-icons type="checkmark-circle" size="28" color="#007AFF" v-if="paymentMethod === 'alipay'"></uni-icons>
        </view>
      </view>
    </view>

    <!-- 订单金额 -->
    <view class="order-amount">
      <view class="amount-item">
        <text class="label">商品总价</text>
        <text class="value">¥{{ totalPrice.toFixed(2) }}</text>
      </view>
      <view class="amount-item">
        <text class="label">运费</text>
        <text class="value">¥{{ freight.toFixed(2) }}</text>
      </view>
      <view class="amount-item total">
        <text class="label">实付款</text>
        <text class="value">¥{{ (totalPrice + freight).toFixed(2) }}</text>
      </view>
    </view>

    <!-- 提交订单按钮 -->
    <view class="submit-order">
      <button class="submit-btn" type="primary" @click="submitOrder">提交订单</button>
    </view>
  </view>
</template>

<script lang="ts">
import { defineComponent, ref, computed, getCurrentInstance } from '@vue/composition-api';
import { onLoad } from '@dcloudio/uni-app';

interface Address {
  consignee: string;
  phone: string;
  province: string;
  city: string;
  district: string;
  detail: string;
}

interface OrderGoods {
  id: number;
  title: string;
  price: number;
  image: string;
  spec: string;
  quantity: number;
}

export default defineComponent({
  setup() {

    const address = ref<Address | null>(null);
    const paymentMethod = ref<string>('wechat');
    const orderGoods = ref<OrderGoods[]>([]);
    const freight = ref<number>(10); // 模拟运费

    onLoad((options: any) => {
      // 从路由参数获取商品信息
      const id = options.id;
      const specIndex = options.spec;

      // 在实际项目中，这里会通过API获取商品详情
      // 这里使用模拟数据
      orderGoods.value = [{
        id: Number(id) || 1,
        title: '新款智能手机 128GB大存储',
        price: 2999,
        image: '/static/goods/phone.jpg',
        spec: ['6GB+128GB 黑色', '6GB+128GB 白色', '8GB+256GB 黑色', '8GB+256GB 白色'][Number(specIndex) || 0],
        quantity: 1
      }];

      // 从本地存储获取默认地址
      const defaultAddress = uni.getStorageSync('defaultAddress');
      if (defaultAddress) {
        address.value = JSON.parse(defaultAddress);
      }
    });

    // 计算商品总价
    const totalPrice = computed(() => {
      return orderGoods.value.reduce((sum, item) => {
        return sum + (item.price * item.quantity);
      }, 0);
    });

    // 选择收货地址
    const chooseAddress = () => {
      // 调用uni.chooseAddress获取用户地址（需要用户授权）
      uni.chooseAddress({
        success: (res) => {
          address.value = {
            consignee: res.userName,
            phone: res.telNumber,
            province: res.provinceName,
            city: res.cityName,
            district: res.countyName,
            detail: res.detailInfo
          };
          // 保存为默认地址
          uni.setStorageSync('defaultAddress', JSON.stringify(address.value));
        }
      });
    };

    // 选择支付方式
    const selectPayment = (method: string) => {
      paymentMethod.value = method;
    };

    // 提交订单
    const submitOrder = () => {
      if (!address.value) {
        uni.showToast({ title: '请选择收货地址', icon: 'none' });
        return;
      }

      // 在实际项目中，这里会调用API提交订单
      // 这里模拟提交成功
      uni.showLoading({ title: '提交订单中...' });

      setTimeout(() => {
        uni.hideLoading();
        uni.showToast({ title: '订单提交成功', icon: 'success' });

        // 跳转到支付页面
        uni.navigateTo({
          url: `/pages/payment/index?amount=${(totalPrice.value + freight.value).toFixed(2)}&method=${paymentMethod.value}`
        });
      }, 1500);
    };

    return {
      address,
      paymentMethod,
      orderGoods,
      freight,
      totalPrice,
      chooseAddress,
      selectPayment,
      submitOrder
    };
  }
});
</script>

<style scoped>
/* 页面头部 */
.page-header {
  padding: 20rpx;
  background-color: #fff;
  border-bottom: 1rpx solid #eee;
  position: sticky;
  top: 0;
  z-index: 99;
}

.title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  text-align: center;
  display: block;
}

/* 收货地址 */
.address-section {
  margin-top: 20rpx;
  background-color: #fff;
  padding: 0 20rpx;
}

.section-title {
  font-size: 30rpx;
  color: #333;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #eee;
}

.address-card {
  padding: 20rpx 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.address-info {
  flex: 1;
}

.consignee {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 10rpx;
  display: block;
}

.address-detail {
  font-size: 26rpx;
  color: #666;
}

.address-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 40rpx 0;
}

.empty-text {
  font-size: 28rpx;
  color: #999;
}

/* 商品列表 */
.goods-section {
  margin-top: 20rpx;
  background-color: #fff;
  padding: 0 20rpx;
}

.goods-list {
  padding: 20rpx 0;
}

.goods-item {
  display: flex;
  align-items: center;
  padding: 10rpx 0;
  border-bottom: 1rpx solid #f5f5f5;
}

.goods-item:last-child {
  border-bottom: none;
}

.goods-image {
  width: 120rpx;
  height: 120rpx;
  border-radius: 10rpx;
  margin-right: 20rpx;
}

.goods-info {
  flex: 1;
}

.goods-title {
  font-size: 28rpx;
  color: #333;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 40rpx;
}

.goods-spec {
  font-size: 24rpx;
  color: #999;
  margin-top: 10rpx;
  display: block;
}

.goods-price {
  font-size: 28rpx;
  color: #ff4400;
  margin-top: 10rpx;
  font-weight: bold;
}

.goods-quantity {
  font-size: 28rpx;
  color: #333;
}

/* 支付方式 */
.payment-section {
  margin-top: 20rpx;
  background-color: #fff;
  padding: 0 20rpx;
}

.payment-methods {
  padding: 20rpx 0;
}

.payment-method {
  display: flex;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #f5f5f5;
}

.payment-method:last-child {
  border-bottom: none;
}

.payment-method.selected {
  color: #007AFF;
}

.payment-icon {
  width: 40rpx;
  height: 40rpx;
  margin-right: 20rpx;
}

.payment-name {
  flex: 1;
  font-size: 28rpx;
}

/* 订单金额 */
.order-amount {
  margin-top: 20rpx;
  background-color: #fff;
  padding: 0 20rpx;
}

.amount-item {
  display: flex;
  justify-content: space-between;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #f5f5f5;
}

.amount-item:last-child {
  border-bottom: none;
}

.label {
  font-size: 28rpx;
  color: #666;
}

.value {
  font-size: 28rpx;
  color: #333;
}

.total .label {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
}

.total .value {
  font-size: 32rpx;
  color: #ff4400;
  font-weight: bold;
}

/* 提交订单按钮 */
.submit-order {
  padding: 20rpx;
  background-color: #f5f5f5;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
}

.submit-btn {
  width: 100%;
  height: 90rpx;
  line-height: 90rpx;
  font-size: 32rpx;
  border-radius: 10rpx;
}
</style>